<template>
  <gui-page>
    <!-- 页面主体 -->
    <template v-slot:gBody>
      <view>
        <form @submit="submit">
          <view class="gui-margin-top gui-padding-x">
            <text class="gui-h6 gui-secondary-text">联系信息</text>
          </view>
          <view style="height:28rpx;"></view>
          <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label gui-secondary-text">联系人名称</text>
              <view class="gui-form-body">
                <input type="text" class="gui-form-input" v-model="formData.product_user_name" placeholder="联系人名称" />
              </view>
            </view>
          </view>
          <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label gui-secondary-text">联系电话</text>
              <view class="gui-form-body">
                <input type="text" class="gui-form-input" v-model="formData.product_phone" placeholder="请输入联系电话" />
              </view>
            </view>
          </view>
          <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label gui-secondary-text">联系地址</text>
              <view class="gui-form-body">
                <input type="text" class="gui-form-input" v-model="formData.product_address" placeholder="请输入联系地址" />
              </view>
            </view>
          </view>

          <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label gui-secondary-text">微信号</text>
              <view class="gui-form-body">
                <input type="text" class="gui-form-input" v-model="formData.product_wchat" placeholder="微信号" />
              </view>
            </view>
          </view>


          <view class="gui-margin-top gui-padding-x">
            <text class="gui-h6 gui-secondary-text">商机信息</text>
          </view>
          <view style="height:28rpx;"></view>
          <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label gui-secondary-text">所在城市</text>
              <view class="gui-form-body">
                <input type="text" class="gui-form-input" v-model="formData.product_city" @click="selectCity"
                  placeholder="请选择城市" />
              </view>
            </view>
          </view>
          <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label gui-secondary-text">所属分类</text>
              <view class="gui-form-body">
                <input type="text" class="gui-form-input" v-model="captorySelect" @click="selectCaptory"
                  placeholder="请选择所属分类" />
              </view>
            </view>
          </view>
          <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label">店铺</text>
              <view class="gui-form-body">
                <picker mode="selector" :range="shops" @change="shopChange">
                  <view class="gui-flex gui-row gui-nowrap gui-space-between gui-align-items-center">
                    <text class="gui-text gui-secondary-text">{{shops[shopIndex]}}</text>
                    <text class="gui-form-icon gui-icons gui-text-center gui-color-gray">&#xe603;</text>
                  </view>
                </picker>
              </view>
            </view>
          </view>
          <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label">专场</text>
              <view class="gui-form-body">
                <picker mode="selector" :range="square" @change="e=>{squareIndex = e.detail.value}">
                  <view class="gui-flex gui-row gui-nowrap gui-space-between gui-align-items-center">
                    <text class="gui-text gui-secondary-text">{{square[squareIndex]}}</text>
                    <text class="gui-form-icon gui-icons gui-text-center gui-color-gray">&#xe603;</text>
                  </view>
                </picker>
              </view>
            </view>
          </view>
          <view class="gui-margin-top gui-padding-x">
            <text class="gui-h6 gui-secondary-text">价格信息</text>
          </view>
          <view style="height:28rpx;"></view>
          <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label gui-secondary-text">清货价</text>
              <view class="gui-form-body">
                <input type="text" class="gui-form-input" v-model="formData.product_price" placeholder="清货价" />
              </view>
            </view>
          </view>
          <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label gui-secondary-text">零售价</text>
              <view class="gui-form-body">
                <input type="text" class="gui-form-input" v-model="formData.product_price_checp" placeholder="零售价" />
              </view>
            </view>
          </view>

          <view class="gui-margin-top gui-padding-x">
            <text class="gui-h6 gui-secondary-text">其他选项</text>
          </view>
          <view style="height:28rpx;"></view>
          <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label gui-secondary-text">一件代发</text>
              <view class="gui-form-body gui-flex">
                <view class="gui-flex1"></view>
                <view style="padding:15rpx 0;">
                  <switch checked="true" name="name6" @change="e=>{ formData.is_broker = e.detail }"
                    style="transform:scale(0.7)" color="#008AFF" />
                </view>
              </view>
            </view>
          </view>
          <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label gui-secondary-text">置顶货源</text>
              <view class="gui-form-body gui-flex">
                <view class="gui-flex1"></view>
                <view style="padding:15rpx 0;">
                  <switch :checked="formData.is_top=='1'" name="name6" @change="e =>{formData.is_top=e.detail?'1':'0'}"
                    style="transform:scale(0.7)" color="#008AFF" />
                </view>
              </view>
            </view>
          </view>

          <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label gui-secondary-text">商机描述</text>
              <view class="gui-form-body">
                <input type="text" class="gui-form-input" v-model="formData.product_name" placeholder="商机描述" />
              </view>
            </view>
          </view>


          <view class="gui-margin-top gui-padding-x">
            <text class="gui-h6 gui-secondary-text">商品图片</text>
          </view>
          <view style="height:28rpx;"></view>

          <view class="gui-idcard-items gui-bg-white gui-dark-bg-level-3 gui-flex gui-row gui-justify-content-center">
            <view class="gui-idcard-items-image" @tap="selectImg('avater')">
              <gui-image :src="avater" :width="380"></gui-image>
            </view>
          </view>


          <view class="gui-margin-top gui-padding-x">
            <text class="gui-h6 gui-secondary-text">商品详情</text>
          </view>
          <view style="height:28rpx;"></view>

          <view class="gui-idcard-items gui-bg-white gui-dark-bg-level-3 gui-flex gui-row gui-justify-content-center">
            <view class="gui-idcard-items-image" @tap="selectImg('xq1')">
              <gui-image :src="xq1" :width="380"></gui-image>
            </view>
          </view>
          <view class="gui-idcard-items gui-bg-white gui-dark-bg-level-3 gui-flex gui-row gui-justify-content-center">
            <view class="gui-idcard-items-image" @tap="selectImg('xq2')">
              <gui-image :src="xq2" :width="380"></gui-image>
            </view>
          </view>

          <view class="gui-margin-top gui-padding-x">
            <text class="gui-h6 gui-secondary-text">商品视频</text>
          </view>
          <view style="height:28rpx;"></view>

          <view class="gui-idcard-items gui-bg-white gui-dark-bg-level-3 gui-flex gui-row gui-justify-content-center">
            <view class="gui-idcard-items-image" @tap="selectImg('video')">
              <gui-image :src="video" :width="380"></gui-image>
            </view>
          </view>



          <view class="gui-margin-top gui-padding-x">
            <text class="gui-h6 gui-secondary-text">商品描述</text>
          </view>
          <view style="height:28rpx;"></view>

          <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">

            <view style="padding:15rpx 0;">
              <textarea v-model="formData.product_desc" placeholder="商品描述..."
                class="gui-textarea gui-bg-gray gui-dark-bg-level-1 gui-padding" style="width:690rpx;"></textarea>
            </view>

          </view>
          <view class="gui-margin-top gui-flex gui-row gui-nowrap gui-justify-content-end gui-padding-x">
            <button type="default" class="gui-button gui-bg-primary gui-noborder" style="width:100%;" formType="submit">
              <text class="gui-icons gui-color-white gui-button-text">提交审核</text>
            </button>
          </view>
          <view style="height:60rpx;"></view>
        </form>
      </view>
    </template>
  </gui-page>
</template>
<script>
  export default {
    data() {
      return {
        // 表单数据存储
        formData: {
          is_top: '0'
        },

        shopIndex: 0,
        shops: [
          "请选择店铺"
        ],
        shopList: [],
        square: [
          "请选择专场", "普通场", "清仓专场", "预售专场"
        ],
        squareIndex: 0,
        captorySelect: '请选择',
        avater: '',
        video: '',
        xq1: '',
        xq2: ''

      }
    },
    onLoad(e) {
      var user = uni.gRequest.checkLogin();

      if (user) {
        this.formData.user_id = user.user_id;

        this.initData();

      }

      if (e.id) {
        this.formData.product_id = e.id;
        this.initProductData();
      }




    },
    onShow() {
      var selectCity = uni.getStorageSync("selectCity");
      if (selectCity) {
        this.formData.product_city = selectCity;
        uni.removeStorageSync("selectCity")
      }

      var selectCaptory = uni.getStorageSync("selectCaptory");

      if (selectCaptory) {
        this.formData.captory_id = selectCaptory.captory_id;
        this.captorySelect = selectCaptory.captory_name;
        uni.removeStorageSync("selectCaptory")
      }



    },
    methods: {
      initData() {
        var self = this;
        uni.gRequest.get("shop/list", {
          user_id: this.formData.user_id
        }).then(x => {
          self.shopList = x.rows;
          x.rows.forEach(z => {
            self.shops.push(z.shop_name)
          });
        });

      },
      initProductData() {
        var self = this;

        uni.gRequest.get('product/model', {
          id: this.formData.product_id
        }).then(result => {
          let sPath = uni.gRequest.server.replace('/app/', '');
          // result.data.shop_dptp = uni.gRequest.server.replace('/app/', '') + result.data.shop_dptp;
          self.formData = result.data;
          self.avater = sPath + self.formData.product_avater;
          if (self.formData.product_video) {
            self.video = sPath + self.formData.product_video;
          }

          // console.log(result.data)
        });
      },
      shopChange(e) {
        this.shopIndex = e.detail.value;
        if (e.detail.value == 0) {
          this.formData.shop_id = '';
        } else {
          this.formData.shop_id = this.shopList[this.shopIndex - 1].shop_id;
        }



      },
      huoyuanTop(e) {
        console.log('111', e.detail)
      },
      selectImg: function(x) {

        var self = this;

        uni.chooseImage({
          count: 1,
          success: (res) => {
            //self[x] = res.tempFilePaths[0];


            uni.uploadFile({
              url: uni.gRequest.server + 'file/upload',
              filePath: res.tempFilePaths[0],
              name: 'file',
              success: (uploadResult) => {
                self[x] = JSON.parse(uploadResult.data).url;
                self.formData["product_" + x] = JSON.parse(uploadResult.data)
                  .fileName
              }

            })


          }
        })
      },
      // 表单提交
      submit: function(e) {

        if (!this.formData.product_avater) {
          uni.showToast({
            title: "请选择商品图片"
          });
          return;
        }
        if (!this.formData.product_name) {
          uni.showToast({
            title: "请输入商机描述"
          });
          return;
        }
        if (!this.formData.product_city) {
          uni.showToast({
            title: "请选择城市"
          });
          return;
        }
        if (!this.formData.product_price) {
          uni.showToast({
            title: "请输入价格"
          });
          return;
        }
        if (!this.formData.product_price_checp) {
          uni.showToast({
            title: "请输入价格"
          });
          return;
        }
        if (!this.formData.product_user_name) {
          uni.showToast({
            title: "请输入联系人名称"
          });
          return;
        }
        if (!this.formData.product_phone) {
          uni.showToast({
            title: "请输入联系人电话"
          });
          return;
        }
        if (!this.formData.shop_id) {
          uni.showToast({
            title: "请选择店铺"
          });
          return;
        }
        if (!this.formData.captory_id) {
          uni.showToast({
            title: "请选择分类"
          });
          return;
        }

        this.formData.square_id = this.squareIndex;

        uni.gRequest.post("product/add", JSON.stringify(this.formData)).then(x => {

          uni.showToast({
            title: "提交成功、请等待管理员审核"
          });

          uni.navigateBack();
        });
      },
      selectCity() {
        uni.navigateTo({
          url: '/pages/com/selectCity'
        })
      },
      selectCaptory() {
        uni.navigateTo({
          url: '/pages/com/selectCaptory'
        })
      }
    }
  }
</script>
<style scoped>
  .gui-idcard-main {
    margin: 25rpx;
  }

  .gui-idcard-desc {
    line-height: 56rpx;
    font-size: 26rpx;
    padding: 20rpx;
    border-radius: 10rpx;
  }

  .gui-idcard-text {
    line-height: 1.8em;
    margin-top: 30rpx;
  }

  .gui-idcard-items {
    padding: 50rpx;
    border-radius: 10rpx;
    margin-top: 15rpx;
  }

  .gui-idcard-items-image {
    width: 380rpx;
  }
</style>
